<template>
  <el-dialog
    title="选择材料"
    width="800px"
    custom-class="gov-application-materials-add"
    :append-to-body="true"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div v-loading="loading.list">
      <dynamicForm v-if="!loading.list" :formItemData="formItemData" ref="dynamicForm" />
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import axios from 'axios';
  import dynamicForm from '../../dynamicForm';
  export default {
    components: { dynamicForm },
    props: {
      visible: {
        type: Boolean
      }
    },
    data() {
      return {
        page: {
          pageNum: 1,
          pageSize: 20,
          total: 0
        },
        formItemData: [
          {
            row: 1, //行号
            sort: 1, //顺序
            id: '1',
            eictId: '1',
            eicName: '公共材料选择',
            eicType: 'checkbox_short',
            eicLength: 50,
            eicOrder: 1,
            eicCode: 'channelId'
          }
        ],
        loading: {
          list: false
        }
      };
    },
    watch: {
      visible: {
        handler(val) {
          if (val) {
            this.fetchDataList();
          }
        }
      }
    },
    computed: {},
    methods: {
      handleClose() {
        this.$emit('update:visible', false);
      },
      // 获取表单列表
      async fetchDataList() {
        this.loading.list = true;
        const { data } = await axios.request({
          url: `/api/v1/event/material/common/page`,
          method: 'get',
          params: {
            name: '',
            current: this.page.pageNum,
            size: this.page.pageSize
          }
        });

        if (data.success) {
          const { current, size, total, records = [] } = data.result || {};
          const pos = 0;
          const item = this.formItemData[pos];

          records.forEach((e) => {
            e.item_text = e.materialName;
            e.item_value = e.materialId;
          });
          item.tags = records;

          this.page.pageNum = current;
          this.page.pageSize = size;
          this.page.total = total;
        }
        this.loading.list = false;
      },
      async submit() {
        this.$refs['dynamicForm'].this.$emit('update:visible', false);
      }
    },
    created() {},
    mounted() {}
  };
</script>
<style lang="scss">
  .gov-application-materials-add {
    .el-dialog__body {
      height: 400px;
      overflow-y: auto;
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
</style>
